<template>
  <div ref="wrapper">
    <div>
      <banner :bannerImg="bannerImg" :bannerName="bannerName" :bannerImgNum="bannerImgNum" :bannerImglist="bannerImglist"></banner>
      <detail-header :headerList="headerList" ></detail-header>
      <detail-list :detaillist="list"></detail-list>
      <div class="detail"></div>
    </div>
  </div>
</template>
<script>
import banner from "./components/banner";
import detailHeader from "./components/header";
import detailList from "./components/list";
import axios from 'axios'
// import BScroll from "better-scroll";

export default {
  name: "detail",
  components: {
    banner,
    detailHeader,
    detailList,

    
  },
  data(){
    return {
      //写递归组件需要的数据格式
      list:[],
      bannerImg:'',
      headerList:[],
      bannerName:'',
      bannerImgNum:Number,
      bannerImglist:[]
    }
  },
  created(){
    this.getDetaildata()
  },
  //解决axios调用数据 解决因为缓存带来的 只调取一次 的问题 或者打开app.vue
  activated(){
        this.getDetaildata()
  },
  methods:{
    getDetaildata(){
      // axios.get('/api/detail.json',{
      //   params:{
      //     id:this.$route.query.id
      //   }
      // })
      axios.get('/api/detail.json?id='+ this.$route.query.id).then((res)=>{
        // console.log(res.data)
        this.bannerImg = res.data.data.bannerImg
        this.list=res.data.data.categoryList
        this.headerList = res.data.data.gallaryImgs
        this.bannerName = res.data.data.sightName
        this.bannerImglist = res.data.data.gallaryImgs
        this.bannerImgNum =res.data.data.gallaryImgs.length
        // console.log( this.bannerImgNum)
      })
    }
  },
  mounted() {
    // this.scroll = new BScroll(this.$refs.wrapper, {
    //   scrollY: true,
    //   click: true
    // });

  }
};
</script>
<style scoped>
.detail{
  width: 100%;
  height: 700px;
}
</style>